import { getData } from '../Data'
import { useState } from 'react'
import { useMount, useReactive } from 'ahooks'
import { format, SortDescription } from "@grapecity/wijmo"
import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid'

const WijmoB01 = () => {
    const [Data, setData] = useState()
    const [selectedItem, setselectedItem] = useState()
    const InitData = useReactive({ init: null })

    useMount(() => {
        setData(getData(20))
    })

    const init = (e) => {
        InitData.init = e
        let sd = new SortDescription("country", true)
        e.collectionView.sortDescriptions.push(sd)
        e.collectionView.currentChanged.addHandler(pText)
        pText()
    }

    const pText = () => {
        const selectedItem = format("大洲: <b>{country}</b>, 时间: <b>{date}</b> 数字: <b>{amount:c0}</b>", InitData.init.collectionView.currentItem)
        setselectedItem(selectedItem)
    }
    return (
        <div className="Page WijmoB01">
            <div className='Content' dangerouslySetInnerHTML={{ __html: selectedItem }} />
            {Data &&
                <FlexGrid initialized={init} itemsSource={Data}>
                    <FlexGridColumn header="大洲" binding="country" width="*" allowDragging={false} allowResizing={false} />
                    <FlexGridColumn header="时间" binding="date" width={240} isReadOnly={true} />
                    <FlexGridColumn header="数字" binding="amount" width="*" format="n2" align='center' />
                </FlexGrid>
            }
            <div>width : 列宽</div>
            <div>* : 百分比</div>
            <div>int : 指定宽度</div>
            <div>minWidth : 最小拉扯宽度</div>
            <div>maxWidth : 最大拉扯宽度</div>
            <div>format : 格式化数据</div>
            <div>n : 千元符加小数点 n1 n2 n3</div>
            <div>c : 美元符加小数点 c0 c1 c2</div>
            <div>p : 百分号小数点 p0 p1 p2</div>
            <div>align : 文字位置 left right center</div>
            <div>allowResizing : 禁止改变大小 </div>
            <div>allowDragging : 禁止拖拽 </div>
            <div>isReadOnly : 只读</div>yarn
            <div>headersVisibility :Column 隐藏第一列</div>
            <div> selectionMode : None  表内数据可选状态</div>
        </div>
    );
};

export default WijmoB01;